<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大作业_简版日历</title>
    <script src="../js/tool.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 280px;
            height: 360px;
            margin: 50px auto;
            background: linear-gradient(#299a0b, #0ebaa3);
            color: aliceblue;
            line-height: 40px;
        }

        #header {
            height: 40px;
            color: aliceblue;
            line-height: 40px;
        }

        #header span {
            float: left;
            text-align: center;
            margin-top: 10px;
            line-height: 40px;
        }

        #prev,
        #next {
            width: 20%;
            line-height: 40px;
            cursor: pointer;
        }

        #current {
            width: 60%;
            line-height: 40px;
        }

        #week li {
            width: 40px;
            text-align: center;
            float: left;
            line-height: 40px;
        }

        #content li {
            width: 40px;
            text-align: center;
            float: left;
            line-height: 40px;
        }

        /* prev month */
        .pm {
            color: gold;
        }

        .cur {}

        .nm {
            color: gold;
        }

        .active {
            background-color: #1F1F5F;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="header">
            <span id="prev" data-value="-1">上</span>
            <span id="current"></span>
            <span id="next" data-value="1">下</span>
        </div>
        <ul id="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul id="content">
            <!-- <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
            <li>09</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
            <li>41</li>
            <li>42</li> -->
        </ul>
    </div>
</body>
<script>

    var contentBox = document.getElementById("content");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var current = document.getElementById("current");

    // 全局变量  => 1. 记录页面加载时的当前时间(可以生成日历)  2. 记录切换后的日期
    var date = new Date();

    createRl(); // 页面加载时根据当前时间 生成日历

    prev.onclick = function () {
        // 点击上个月

        // 点击下个月  =>  日期切换至下个月
        date.setDate(1); // 大月切小月的问题 => 日期几号不影响日历的结构
        date.setMonth(date.getMonth() - 1);  //修改全局date => 记录切换后的时间

        createRl();

    }
    next.onclick = function () {
        // 点击下个月  =>  日期切换至下个月
        date.setDate(1); // 大月切小月的问题 => 日期几号不影响日历的结构
        date.setMonth(date.getMonth() + 1);  //修改全局date => 记录切换后的时间

        createRl()
    }




    function createRl() {
        var firstDayWeek = getFirstDayWeek(date);
        console.log(firstDayWeek);

        var lastMonthDays = getLastMonthDays(date);
        console.log(lastMonthDays);

        var thisMonthDays = getThisMonthDays(date);
        console.log(thisMonthDays);


        // 日期显示 (xxxx年xx月)
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        current.innerText = `${year}年${month}月`;

        // 对本月的今年 今月 今日 => 添加特殊样式
        // 切换后的时间 和 今日时间是一一对应的
        // 

        var now = new Date();
        var nowYear = now.getFullYear();
        var nowMonth = now.getMonth() + 1;
        var today = now.getDate();


        // 日历生成
        var html = "";  //变量 => 拼接42个li

        // 假如日历切换为10月,10月的上个月 还是9月 => 也要进行标红处理(末尾) 
        // 上个月
        for (var i = lastMonthDays - firstDayWeek + 1; i <= lastMonthDays; i++) {
            if (nowYear == year && nowMonth == month - 1 && today == i) {
                html += `<li class="active">${i}</li>`;
            } else {
                html += `<li class="pm">${i}</li>`;
            }
        }

        // 当前月
        for (var i = 1; i <= thisMonthDays; i++) {
            if (nowYear == year && nowMonth == month && today == i) {
                html += `<li class="active">${i}</li>`;
            } else {
                html += `<li>${i}</li>`;
            }

        }


        // 假如日历切换为8月 => 8月的下个月 也是所谓的当前月(可能会出现标红清空 => 开头)
        // 下个月  
        for (var i = 1; i <= 42 - firstDayWeek - thisMonthDays; i++) {
            if (nowYear == year && nowMonth == month + 1 && today == i) {
                html += `<li class="active">${i}</li>`;
            } else {
                html += `<li class="nm">${i}</li>`;
            }
        }

        contentBox.innerHTML = html;
    }

</script>

</html>